<template>
  <div class="customer">
    <div class="customer-item active">
      <img src="@/assets/images/icon_online.png" class="customer-icon icon-online" alt="" />
      <span class="customer-text">在线沟通</span>
    </div>
    <div class="customer-item">
      <img src="@/assets/images/icon_consult.png" class="customer-icon icon-consult" alt="" />
      <span class="customer-text">免费咨询</span>
    </div>
    <div class="customer-item">
      <img src="@/assets/images/icon_attention.png" class="customer-icon icon-attention" alt="" />
      <span class="customer-text">我的关注</span>
    </div>
    <div class="top" @click="backTop">
      <span class="top-text">TOP</span>
      <img src="@/assets/images/icon-top.png" class="icon-top" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'customer',
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },

  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.customer {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 2;
  .customer-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    width: 81px;
    height: 132px;
    border-radius: 10px;
    margin-bottom: 4px;
    background-color: #5a5a5a;
    &.active {
      background-color: #c7343c;
    }
    .customer-icon {
      margin-bottom: 13px;
    }
    .icon-online {
      width: 44px;
      height: 44px;
    }
    .icon-consult {
      width: 47px;
      height: 37px;
    }
    .icon-attention {
      width: 32px;
      height: 32px;
    }
    .customer-text {
      width: 32px;
      word-break: break-all;
      font-size: 16px;
      color: #fff;
    }
  }
  .top {
    width: 81px;
    height: 58px;
    background: #c7343c;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .top-text {
      font-size: 16px;
      color: #fff;
      margin-right: 6px;
    }
  }
}
</style>
